<template>
  <div class="app-container">
    <div class="userInfo">
      <img :src="baseImgUrl+userInfo.headUrl" alt="">
      <div class="userItem">
        <div>
          <p>昵称：{{userInfo.name}}</p>
          <p>消费次数：{{userInfo.consumeNum}}</p>
        </div>
        <div>
          <p>手机号：{{userInfo.phone}}</p>
          <p>消费金额：{{userInfo.consumeMoney}}</p>
        </div>
        <div class="">
          <p>等级：{{userInfo.levelName}}</p>
          <p>成为分享客时间：{{userInfo.createTime}}</p>
        </div>
        <div class="">
          <p>邀请人数：{{userInfo.inviteNum}}</p>
          <p>状态：{{userInfo.status|changeStatus}}</p>
        </div>
      </div>
    </div>
    <div class="detailBox">
      <p class="title">收益信息（元）</p>
      <p>
        <span>累计收益：{{userInfo.shareMoney+userInfo.subordinateMoney}}</span>
        <span>未分账金额：{{userInfo.refundingMoney}}</span>
      </p>
      <div class="detail">
        <div class="detailItem">
          <p class="title">分享商品信息</p>
          <p>累计分享成交订单：{{userInfo.turnover}}</p>
          <p>累计分享成交金额：{{userInfo.totalMoney }}</p>
          <p>分享获得收益：{{userInfo.shareMoney}}</p>
        </div>
        <div class="detailItem">
          <p class="title">邀请信息</p>
          <p>邀请人数：{{userInfo.inviteNum}}</p>
          <p>下级累计贡献收益：{{userInfo.subordinateMoney}}</p>
        </div>
      </div>
    </div>
    <div class="tableBox">
      <div class="tableHeader">
          <p
            v-for="item in tabData"
            :key="item.index"
            :class="[activeName == item.index?'active':'']"
            @click="changeTable(item)"
          >{{item.name}}</p>
      </div>
      <invitation-table v-if="activeName  == 2" @showDetail="showDetail" />
      <separate-table  v-else :refundType="refundType" inviteeId=""/>
    </div>

    <el-dialog title="详情" :visible.sync="dialogFormVisible" width="900px" >
      <separate-table :inviteeId="inviteeId"  />
    </el-dialog>


  </div>
</template>

<script>
  import { getDetail } from '@/api/setSharing'
  import separateTable from "./components/separate-management/separateTable"
  import invitationTable from  "./components/separate-management/invitationTable"
  export default {
    name: 'separateAccounts',
    components:{
      invitationTable,
      separateTable
    },
    data() {
      return {
        userInfo: {},
        baseImgUrl: process.env.VUE_APP_FILE_URL,
        tabData: [
          { index: 0, name: '分账明细',type:"" },
          { index: 1, name: '分享明细' ,type:1},
          { index: 2, name: '邀请明细' ,type:""}
        ],
        activeName: 0,
        refundType:"",
        inviteeId:"",
        dialogFormVisible:false
      }
    },
    filters: {
      changeStatus(val) {
        switch (val) {
          case 1:
            return '通过'
            break
          case 2:
            return '拒绝'
            break
          default:
            return '待审核'
        }
      }
    },
    created() {
      this.getDetail()
    },
    methods: {
      getDetail() {
        getDetail({ 'userId': this.$route.query.id }).then(res => {
          if (res.code == 200) {
            this.userInfo = {
              ...res.data.userAccount, ...res.data.user, ...res.data.customerInfo,
              'levelName': res.data.levelName
            }
          }
        })
      },
      changeTable(row){
        this.refundType = row.type
        this.activeName =row.index
      },
      showDetail(row){
        this.inviteeId = row.inviteeId
        this.dialogFormVisible = true
      }
    }
  }
</script>

<style scoped lang="scss">

  .app-container {
    padding: 20px 0 !important;
    .userInfo {
      display: flex;
      align-items: center;
      width: 100%;
      border-bottom: 1px solid #333333;
      padding:0 20px 20px 20px;

      img {
        width: 80px;
        height: 80px;
        border-radius: 40px;
      }

      .userItem {
        width: calc(100% - 200px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 40px;

        p {
          font-size: 14px;
        }
      }
    }

    .detailBox {
      padding:0 20px ;
      .title {
        font-size: 16px;
        margin-bottom: 30px;
      }

      p {
        font-size: 13px;

        span {
          margin-right: 20px;
        }
      }

      .detail {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 30px;

        .detailItem {
          width: 396px;
          padding: 15px;
          height: 227px;
          background-color: #f2f2f2;

          .title {
            text-align: left;
          }

          p {
            width: 100%;
            text-align: center;
            margin-bottom: 30px;
          }
        }
      }
    }

    .tableBox {
      margin-top: 30px;
      .tableHeader {
        width: 100%;
        display: flex;
        padding: 0 20px;
        align-items: center;
        background-color: rgba(242, 242, 242, 1);
        border-top: 1px solid #333333;
        border-bottom: 1px solid #333333;

        .active {
          font-weight: bold;
        }
        p{
          width: 100px;
          cursor: pointer;
        }
      }

    }
  }

</style>
